<!-- 需求编辑页面 -->
<template>
  <pageHeader :title="title" :breadCrumb="breadCrumb">
    <!-- <template #buts>
      <a-button v-if="!route.query.key" type="primary" @click="addDemand">
        <template #icon>
          <icon-plus />
        </template>
        保存
      </a-button>
    </template> -->
  </pageHeader>
  <div style="display: flex">
    <div class="form-item">
      <div class="demand-index">
        <a-form
          auto-label-width
          ref="form"
          :model="demand.info"
          autoLabelWidth
          :layout="(layout as Tlayout)"
        >
          <a-row :gutter="16">
            <a-col
              v-for="item in demandForm?.info?.design?.form"
              :key="item.id"
              :span="item.span"
            >
              <FormItem
                :name="item.name"
                :componentType="item.componentType"
                v-model:props="item.props"
                :required="item.required"
                :disabled="item.disabled"
                v-model:values="item.values"
              />
            </a-col>
          </a-row>
        </a-form>
      </div>
    </div>
    <ReviewApprovalDetail
      class="approve-item"
      :isProcess="isProcess"
      :approved="approved"
      :flowAuditData="flowAuditData"
      @finalAudit="finalAudit"
    />
  </div>

  <!-- <div>
    <div>
      <div class="title-item">
        <span style="padding-left: 40px"> 审核结果</span>
      </div>
      <div style="width: 95%; margin: 20px 40px">
        <a-space :size="40" direction="vertical" fill>
          <div
            ><span>是否通过审核：</span>
            <a-radio-group
              v-model="FindingsAudit"
              size="large"
              :disabled="route.query.key !== '1'"
            >
              <a-radio
                :value="1"
                :style="{
                  marginRight: '20px',
                }"
              >
                <template #radio="{ checked }">
                  <div
                    :style="{
                      display: 'flex',
                      width: '135px',
                    }"
                    :class="checked ? 'checked-radio' : 'unchecked-radio'"
                  >
                    <div
                      :style="{
                        width: '35px',
                        textAlign: 'center',
                      }"
                      :class="
                        checked
                          ? 'radio-icon-box-checked'
                          : 'radio-icon-box-unchecked'
                      "
                    >
                      <icon-check-circle
                        :class="
                          checked
                            ? 'radio-icon-checked'
                            : 'radio-icon-unchecked'
                        "
                        class="radio-icon"
                        size="20px"
                      />
                    </div>
                    <div
                      :style="{
                        width: '100px',
                        textAlign: 'center',
                      }"
                    >
                      通过
                    </div>
                  </div>
                </template>
              </a-radio>
              <a-radio :value="2">
                <template #radio="{ checked }">
                  <div
                    :style="{
                      display: 'flex',
                      width: '135px',
                    }"
                    :class="checked ? 'checked-radio-no' : 'unchecked-radio'"
                  >
                    <div
                      :style="{
                        width: '35px',
                        textAlign: 'center',
                      }"
                      :class="
                        checked
                          ? 'radio-icon-box-checked-no'
                          : 'radio-icon-box-unchecked'
                      "
                    >
                      <icon-check-circle
                        :class="
                          checked
                            ? 'radio-icon-checked-no'
                            : 'radio-icon-unchecked'
                        "
                        class="radio-icon"
                        size="20px"
                      />
                    </div>
                    <div
                      :style="{
                        width: '100px',
                        textAlign: 'center',
                      }"
                    >
                      不通过
                    </div>
                  </div>
                </template>
              </a-radio>
            </a-radio-group></div
          >
        </a-space>
      </div>
    </div>
  </div> -->
</template>

<script lang="ts" setup>
  import { ref, reactive, onMounted } from 'vue';
  import {
    getDemandFormStatusOn,
    postDemandForm,
    getOrderDemand,
    putDemandForm,
    putOrderDemandFlow,
  } from '@/api/order-management/client-management/demand/demand';
  import { useRouter, useRoute } from 'vue-router';

  const flowAuditData = ref<any>({});
  const isProcess = ref(true);
  const approved: any = ref([]);
  let checkGroupValue = ['1'];
  const route = useRoute();
  const router = useRouter();
  const breadCrumb: string[] = ['需求管理', '客户需求', '需求详情'];
  const title: string = '需求详情';
  const layout = ref('vertical');
  type Tlayout = 'inline' | 'horizontal' | 'vertical' | undefined;
  const fakeValue = ref(['']);
  const FindingsAudit = ref(1);
  const demand = reactive<any>({
    info: {
      id: 0,
      clientCompanyId: 0,
      clientName: '',
      userStaffName: '',
      userStaffId: 0,
      extend: '',
      orderTime: '',
      product: [],
      delivery: [],
      orderTemplateId: 0,
      status: 0,
    },
  });
  interface DemandFormType {
    info: {
      design: {
        form: any[];
      };
    };
  }
  const demandForm = reactive<DemandFormType>({
    info: { design: { form: [] } },
  });
  const keys = Object.keys(demand.info);
  // 添加
  const addDemand = async () => {
    if (FindingsAudit.value === 1) {
      demand.info.state = 4;
    } else if (FindingsAudit.value === 2) {
      demand.info.state = 5;
    }
    delete demand.info.extends;
    await putDemandForm(demand.info);
    router.back();
  };
  const getFlowRel = (res: any) => {
    const {
      createName,
      createPosition,
      reviewedName,
      reviewedPosition,
      createBy,
      reviewedBy,
      state,
    }: any = res[0];
    approved.value.push({
      flowNodeType: 1,
      createName,
      createPosition,
      show: true,
      state: 1,
      createBy,
    });
    res.forEach((item) => {
      approved.value.push({
        flowNodeType: 2,
        reviewedName: item.reviewedName,
        reviewedPosition: item.reviewedPosition,
        show: true,
        reviewedBy: item.reviewedBy,
        state: item.state,
        remark: item.remark,
      });
    });
  };

  const getDemandInfo = async (id: number) => {
    let res = await getOrderDemand({ id });
    flowAuditData.value = res.flowRel;
    getFlowRel(flowAuditData.value);
    demand.info = res;
    if (demand.info.state === 4) {
      FindingsAudit.value = 1;
    } else {
      FindingsAudit.value = 2;
    }
    demandForm.info.design.form = JSON.parse(res.extend);
    demandForm.info.design.form.sort((a: any, b: any) => a.sort - b.sort);
    demandForm.info.design.form.forEach((item: any) => {
      item.disabled = true;
      if (item.componentType === 'FILE') {
        item.props.data = res.file;
      }
      if (item.componentType === 'NUMBER-UNIVERSAL') {
        item.values = [demand.info.number];
      }
      if (item.componentType === 'ORDER_TIME') {
        item.values = [demand.info.createdAt];
      }
    });
  };
  const formTemplate = ref([]);
  onMounted(() => {
    // 如果是添加则获取状态开启的那个模板
    // getByTemplateStatusOn()
    // 如果是编辑则获取对应的模板
    let demandId = Number(router.currentRoute.value.query.id);
    demand.info.id = demandId;
    getDemandInfo(demandId);
  });

  const finalAudit = async (data: any) => {
    await putOrderDemandFlow({ ...data });
    router.back();
  };
</script>

<style scoped lang="less">
  .demand-index {
    padding: 16px;
    width: 95%;
    margin: 0 auto;
  }

  .success {
    position: absolute;
    right: 30px;
    background-color: #31c27c;
    color: #fff;
    border-radius: 100%;
    width: 50px;
    text-align: center;
  }

  .blacklist {
    position: absolute;
    right: 30px;
    background-color: red;
    color: #fff;
    margin-left: 20px;
    border-radius: 100%;
    width: 50px;
    text-align: center;
  }

  .title-item {
    width: 95%;
    height: 60px;
    margin: auto;
    background-color: rgba(245, 247, 250);
    line-height: 60px;
    margin-top: 20px;
  }

  .unchecked-radio {
    background-color: #fff;
    color: #dcdfe6;
    border: 1px solid #dcdfe6;
    font-weight: 700;
    font-size: 16px;
  }
  .checked-radio {
    background-color: rgb(49, 194, 124);
    color: #fff;
    border: 1px solid rgb(49, 194, 124);
    font-weight: 700;
    font-size: 16px;
  }

  .checked-radio-no {
    background-color: rgb(255, 0, 0);
    color: #fff;
    border: 1px solid rgb(255, 0, 0);
    font-weight: 700;
    font-size: 16px;
  }
  .radio-icon-box-checked {
    border: 1px solid rgb(49, 194, 124);
    background-color: #fff;
  }
  .radio-icon-box-checked-no {
    border: 1px solid rgb(255, 0, 0);
    background-color: #fff;
  }
  .radio-icon-box-unchecked {
    border: 1px solid rgba(220, 223, 230, 1);
  }
  .radio-icon-checked {
    color: rgb(49, 194, 124);
  }

  .radio-icon-checked-no {
    color: rgb(255, 0, 0);
  }

  .radio-icon-unchecked {
  }
  .radio-icon {
    position: relative;
    top: 3px;
  }

  .Submit-button {
    margin-right: 45px;
    display: flex;
    flex-direction: row-reverse;
  }

  .title-item {
    width: 95%;
    height: 60px;
    margin: auto;
    background-color: rgba(245, 247, 250);
    line-height: 60px;
    margin-top: 20px;
  }
  .demand-index {
    padding: 20px;
  }
  .approve-item {
    margin: 25px auto;
    width: 30%;
    margin: 15px;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 8px;
    // -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.349019607843137);
    // -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.349019607843137);
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.349019607843137);
    height: 600px;
    margin: 15px;
  }

  .form-item {
    width: 65%;
  }
</style>
